<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <!--<script src="jquery.js" type="text/javascript"></script>-->
    <!--<script src="ongradeanimationCtrl.js" type="text/javascript"></script>-->
    <style type="text/css">
        *{
            padding:0px;
            margin:0px;
            border:0px;
        }
        li{
            list-style-type:none;
        }
        a{
            text-decoration:none;
        }
        #wrapper{
            margin:0px auto;
            border:0px;
            padding:0px;
        }
        #show-area{
            width:800px;
            height:450px;
            position:relative;
            margin:0px auto;
            overflow:hidden;
        }
        #show-area ul{
            position:relative;
            width:4800px;
            height:450px;
            right:0;
        }
        #show-area ul li{
            float:left;
            width:800px;
        }
        #controler{
            width:120px;
            text-align:center;
            position:absolute;
            top:425px;
            left:370px;
            z-index:1;
        }
        #controler div{
            height:15px;
            width:15px;
            border-radius:100%;
            background-color:#ccc;
            float:left;
            margin-left:5%;
            opacity:0.9;/*透明度50%*/
            filter:Alpha(opacity=90);/*为了适应旧的浏览器*/
        }
        #button-left{
            /*display:none;*/
            color:#fff;
            position: absolute;
            top: 189px;
            left: 0px;
            width: 60px;
            height: 60px;
            z-index:2;
            border-radius:100%;
            background-size:cover;
            opacity:0.5;/*透明度50%*/
            filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
        }
        #button-right{
            /*display:none;*/
            color:#fff;
            position: absolute;
            top: 189px;
            left: 740px;
            width: 60px;
            height: 60px;
            z-index:2;
            border-radius:100%;
            background-size:cover;
            opacity:0.5;/*透明度50%*/
            filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
        }
        .onclick{
            background-color:#FFF !important;
        }
    </style>
</head>

<body>
<div id="wrapper">
    <div id="show-area">

        <ul>

            <li><img class="img_1" src="../img/1231231.png" alt=""></li>
            <li> <img class="img_1" src="../img/图层-882.png" alt=""></li>
            <li><img class="img_1" src="../img/5478.png" alt=""></li>
            <li><img class="img_1" src="../img/5478.png" alt=""></li>

        </ul>

        <div id="button-left" title="下一张" style="color: #000000">下一张</div>
        <div id="button-right" title="上一张" style="color: #000000">上一张</div>

        <div id="controler"></div><!--控制按钮,为了日后方便后台操作这里的控制按钮在js代码中控制添加-->
    </div>
</div>
<script src="../jquery-1.9.1/jquery.min.js"></script>
<script>
    $(function(){
        var i = 0;
        var imgWidth = $("#show-area ul li").width();
        var clone = $("#show-area ul li").first().clone();
        $("#show-area ul").append(clone);
        //复制第一张图片并且添加到最后达到无缝连接的效果
        var size = $("#show-area ul li").size();//得到所有li的个数
        /*第一步*/
        //一开始循环添加按钮
        for(var j = 0 ; j<size - 1 ; j++){
            $("#controler").append("<div></div>");

        }
        //为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片
        //所以添加按钮的时候我们也应该添加4个按钮
        $("#controler div").eq(0).addClass("onclick");




        /*第二步*/
        //左按钮
        $("#button-left").click(function(){
            Toleft();

        })


        //右按钮
        $("#button-right").click(function(){
            Toright();

        })






        /*第3步*/
        //按钮移出移入事件
        $("#controler div").hover(function(){
            i = $(this).index();
            clearInterval(timer);
            $("#show-area ul").stop().animate({left:-i * imgWidth});
            $(this).addClass("onclick").siblings().removeClass("onclick");
//            $("#index").html("index的值：" + index());

        },function(){
            timer = setInterval(function(){
                Toleft();

            },3000)

        })
        //ul鼠标移出移入事件
        $("#show-area ul").hover(function(){
            clearInterval(timer);

        },function(){
            timer = setInterval(function(){
                Toleft();

            },3000)

        })
        //两个方向按钮鼠标移出移入事件
        $("#button-left,#button-right").mouseover(function(){
            clearInterval(timer);
        }).mouseout(function(){
            timer = setInterval(function(){
                Toleft();

            },3000)
        })
        //定时器
        var timer = setInterval(function(){
            Toleft();

        },3000)

        /*第2.1步*/
        //左按钮实现的函数
        function Toleft(){

            i++;
            if(i==size){
                //当当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片）并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）
                $("#show-area ul").css({left:0});
                i = 1;
            }
            $("#show-area ul").stop().animate({left:-i*imgWidth},1000);

            if(i == size -1){
                $("#controler div").eq(0).addClass("onclick").siblings().removeClass("onclick");

            }else{
                $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick");

            }




        }


        /*第2.2步*/
        //右按钮实现的函数
        function Toright(){

            //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来
            i--;
            if(i==-1){
                $("#show-area ul").css({left:-(size - 1)*imgWidth});
                i=size-2;

            }
            $("#show-area ul").animate({left:-i*imgWidth},1000);
            $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick");

        }

    });


</script>
</body>
</html>